<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title></title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-select.css" rel="stylesheet">
<link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="../css/bootstrap-treeview.min.css">
<link href="../css/bootstrap-table.css" rel="stylesheet">
<link href="../css/bootstrap-table-fixed-columns.css" rel="stylesheet">
<link href="../css/font-awesome.min.css" rel="stylesheet">
<link href="../css/JyyCommon.css" rel="stylesheet">
<link href="../css/JyyTable.css" rel="stylesheet">
<link href="../css/JyyTree.css" rel="stylesheet">
<link href="../css/JyyMsgBox.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../js/jquery.form.min.js"></script> 
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-treeview.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-select.js"></script>
<script type="text/javascript" src="../js/bootstrap-table.js"></script>
<script type="text/javascript" src="../js/bootstrap-table-fixed-columns.js"></script>
<script type="text/javascript" src="../js/jyy_modal.js"></script>
<script type="text/javascript" src="../js/JyyCommon.js"></script>
<script type="text/javascript" src="../js/JyyTable.js"></script>
<script type="text/javascript" src="../js/JyyTree.js"></script>
<script type="text/javascript" src="../js/JyyMsgBox.js"></script>
<script type="text/javascript" src="../js/JyyLoading.js"></script>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/layui/layui.js"></script>
<script type="text/javascript" src="../../utils/CommonUtil.js"></script>

<script type="text/javascript">
	var projectId =  '88888888888';
    $(function(){
    	projectId =  getQueryString("projectId")||'88888888888';
		// projectId = '2531';
    	initialize();
    	 visualization();
   	    pieechars();
	})
	
  function initialize(){
	    $.ajax({
	    	url : "Sample/getTableData1",
	    	 type:'post',
	         contentType: 'application/json; charset=utf-8',
	         data:JSON.stringify({"planid" : projectId }),
	         success : function(data){
	        	 for(var i=1;i<7;i++){
	        		 document.getElementById("itemVal"+i).innerHTML = data.respData['item'+i]==undefined?"": data.respData['item'+i];
	        	 }
	         }
	    })
   	};
  /* function LCOE(){
	  var year = document.getElementById("yearSel").value;
	  $.ajax({
	    	url : "../g/service/Sample/getLcoedata",
	    	 type:'post',
	         contentType: 'application/json; charset=utf-8',
	         data:JSON.stringify({"planid" : projectId ,"yearid":year}),
	         success : function(data){
	        	 document.getElementById("lcoe").innerHTML = (data.value==undefined?"":data.value);
	         }
	    })
  } */
  function visualization() {
	    $.ajax({
	    	url : "Sample/getVisualization1",
	    	 type:'post',
	         contentType: 'application/json; charset=utf-8',
	         data:JSON.stringify({"planid" : projectId }),
	         success : function(data){
	        	 echars2(data.respData);
	         }
	    })
    }
  function pieechars(){
	  $.ajax({
	    	url : "Sample/pieechars1",
	    	 type:'post',
	         contentType: 'application/json; charset=utf-8',
	         data:JSON.stringify({"planid" : projectId }),
	         success : function(data){
	        	 echars(data.respData);
	         }
	    })
    }
	  
  function echars(data){
	  var database=[];
	  for(item in data){
		  var data1={"value":data[item],"name":item}
		  database.push(data1);
	  }
	 
	  var chartDom = document.getElementById('echars');
		 var myChart = echarts.init(chartDom);
		 var option;

		 option = {
				  tooltip: {
				    trigger: 'item',
				    formatter: '{a} <br/>{b}: {c} ({d}%)'
				  },
				  title:{
			        	subtext: '单位：亿千瓦时',
			          	right: '1.67%',
			          	bottom: '10%',
			          	textAlign: 'center',
			          	subtextStyle: {
				        	fontSize: 12,
				            color: 'black',
						},
		        },
				  series: [
				    {
				      name: '发电量',
				      type: 'pie',
				      radius: ['30%', '55%'],
				      center:['45%','48%'],
				      labelLine: {
				        length: 40
				      },
				      avoidLabelOverlap: true,
				      itemStyle: {
				        borderRadius: 10,
				        borderColor: '#fff',
				        borderWidth: 2
				      },
				      label: {
				        formatter: ' {b|{b}：}\n {c} {per|{d}%} ',
				        backgroundColor: '#F6F8FC',
				        borderColor: '#8C8D8E',
				        borderWidth: 1,
				        borderRadius: 4,
				        rich: {
				          a: {
				            color: '#6E7079',
				            lineHeight: 22,
				            align: 'center'
				          },
				          hr: {
				            borderColor: '#8C8D8E',
				            width: '100%',
				            borderWidth: 1,
				            height: 0
				          },
				          b: {
				            color: '#4C5058',
				            fontSize: 14,
				            fontWeight: 'bold',
				            lineHeight: 33,
				            align: 'right'
				          },
				          per: {
				            color: '#fff',
				            backgroundColor: '#4C5058',
				            padding: [3, 4],
				            borderRadius: 4
				          }
				        }
				      },
				      labelLine: {
				        show: true,
				        length: 20
				      },
				      data:database
				    }
				  ]
				};   

		option && myChart.setOption(option);
		window.addEventListener("resize", () => {
			if(myChart){
				myChart.resize()
			}
		})
 }
 
 function echars2(data){
	 var xData=data.xList;
	 var yData=data.dataList;
	 var chartDom = document.getElementById('piechart');
	 var myChart = echarts.init(chartDom);
	 var option;
	 
	 option = {
			    
			  tooltip: {
			    trigger: 'axis',
			    axisPointer: {
			      type: 'shadow'
			    }
			  },
			    toolbox: {
			    show: true,
			    feature: {
			      dataView: { show: true, readOnly: false },
			      magicType: { show: true, type: ['line', 'bar'] },
			      restore: { show: true },
			      saveAsImage: { show: true }
			    }
			  },
			  grid: {
			    left: '5%',
			    right: '6%',
			    bottom: '0%',
			    containLabel: true
			  },
			  xAxis: [{
			      type: 'category',
			      data: xData
			      
			  }],
			  yAxis: [{
			      type: 'value',
			      name: '小时'
			  }],
			  series: [{
			      name: '利用小时数',
			      type: 'bar',
			      barWidth: '40%',
			      color:'#5470c6',
			      data: yData,
			      label: {
			          show: true,
			          position: 'top'
		       	  },
			  }]
		};   
	 	option && myChart.setOption(option);
		window.addEventListener("resize", () => {
			if(myChart){
				myChart.resize()
			}
		})
	 
}

function getQueryString (name){
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	var r = window.location.search.substr(1).match(reg);
	return r ? unescape(r[2]) : null;
}
</script>

<style type="text/css">
	body, html{
		width: 100%;
		height: 100%;
	}
	.selBtn {
		margin-left:20px;
		height:30px;
		width:70px;
		background-color:#1890FF;
		border-radius:5px;
		border: 0px;
		color:white;
	}
	.selBtn:hover {
		background-color: #00BFFF;
	}
	
	.bootstrap-select:not(.input-group-btn), .bootstrap-select[class*="col-"] {
		float: left;
	}
	.cumCard {
		margin-left: 10%;
		min-width: 90px;
		width: 22%;
		height: 117px;
		display: inline-block;
		margin-top: 20px;
	}
	.amount {
		width: 100%;
		height: 50px;
		margin-top: 17px;
		vertical-align: middle;
		display: inline-block;
	}
	.val {
		width: calc(85% - 40px);
    	font-size: 25px;
	    font-weight: bolder;
	    color: #00CFFF;
	    text-align: right;
	    margin: 10px;
	    display: inline-block;
	    line-height: 25px;
	}
	#cumulativeDiv::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.1);
        outline-color: #ccc;
    }
	.liqCard {
		margin-left: 50px;
		margin-right: 30px;
		width: 190px;
		height: 150px;
		display : inline-block;
		margin-top: 10px;
	}
	.show{
		box-shadow: 0 0.05rem 1rem rgba(0,0,0,0.15)!important;
		border-radius: 0.25rem!important;
		margin-left: 20px;
	}
	.shadow{
		box-shadow: 0 0.05rem 1rem rgba(0,0,0,0.15)!important;
		border-radius: 0.25rem!important;
	}
	#item1,#item2,#item3,#item4,#item5,#item6{
		display:inline-block;
		width: 100%;
		height:53px;
		background: linear-gradient(to left,#fff,#209CE2);
		border-left-width: 7px;
		border-left-color: #0849FA;
		box-sizing: border-box;
		border-left-style: solid;
	}
	.cardSpan {
		font-size: 18px;
		margin-top: 14px;
		margin-left: 20px;
		text-align: center; 
		color:white;
		position: absolute;
	}
	.cardUnit{
		display: inline-block;
		font-weight: 700;
		font-family: '黑体 Bold', '黑体' ;
		font-size:15px;
		width: 18%;
		min-width: 30px;
		text-align: center;
	}
</style>
</head>
<body>
<div style="overflow-y: auto;width: 100%;height: 100%;">
	<div id="cumulativeDiv" class="show" style="width: calc(100% - 40px);min-height: 385px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">方案概况</span>
		</p>
		<div style="margin-top: 20px;">
			<div class="cumCard">
				<div id="item1"><span class="cardSpan">机组发电成本</span></div>
				<div class="amount">
					<div class="val" id="itemVal1"></div>
					<div class="cardUnit">亿元</div>
				</div>
			</div>
			<div class="cumCard">
				<div id="item2"><span class="cardSpan">总负荷需求</span></div>
				<div class="amount">
					<div class="val" id="itemVal2"></div>
					<div class="cardUnit">万千瓦</div>
				</div>
			</div>
			<div class="cumCard">
				<div id="item3"><span class="cardSpan">机组总发电量</span></div>
				<div class="amount">
					<div class="val" id="itemVal3"></div>
					<div class="cardUnit">亿千瓦时</div>
				</div>
			</div>
		</div>
		<div style="margin-top: 20px;">
			<div class="cumCard">
				<div id="item4"><span class="cardSpan">碳排放量</span></div>
				<div class="amount">
					<div class="val" id="itemVal4"></div>
					<div class="cardUnit">万吨</div>
				</div>
			</div>
			<div class="cumCard">
				<div id="item5"><span class="cardSpan">弃电量</span></div>
				<div class="amount">
					<div class="val" id="itemVal5"></div>
					<div class="cardUnit">亿千瓦时</div>
				</div>
			</div>
			<div class="cumCard">
				<div id="item6"><span class="cardSpan">弃电率</span></div>
				<div class="amount">
					<div class="val" id="itemVal6"></div>
					<div class="cardUnit">%</div>
				</div>
			</div>
		</div>
	</div>
	
	<div id="powerRejecEchart" style="width: calc(100% - 40px);height: 440px;margin-top: 25px;margin-left:20px;position: relative;">
		<div class="shadow" style="width:calc(50% - 12px);height:430px;display:inline-block">
			<p style="margin-top: 10px;">
				<span style="color:#1890FF;font-weight: 700;font-size: 16px;margin-left: 23px;font-family: '黑体 Bold', '黑体';">各类型机组发电量及占比</span>
			</p>
			<div id="echars" style="width:100%;height:370px;display:inline-block;"></div>
		</div>
		<div class="shadow" style="width:calc(50% - 12px);height:430px;margin-left:20px;display:inline-block">
			<p style="margin-top: 10px;">
				<span style="color:#1890FF;font-weight: 700;font-size: 16px;margin-left: 23px;font-family: '黑体 Bold', '黑体';">各类型机组利用小时数统计</span>
			</p>
			<div id="piechart" style="width:100%;height:370px;display:inline-block;"></div>
		</div>
	</div>
</div>
</body>
</html>